<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="fn()">按钮</button>
    <ul>
        <!-- <li>
            <span></span>
            <span></span>
            <span></span>
        </li> -->
    </ul>
    <script>

        function fn() {
            //发起ajax请求的代码
            // XMLHttpRequest() ajax 技术要使用的构造函数

            // 0-找到接口文档（问后端要 -https://jx.xuzhixiang.top/）
            // 1-接口功能--热搜接口
            // 2-请求地址http://jx.xuzhixiang.top/ap/api/hot.php
            // 3-请求参数 无
            // 3-请求方式--get 


            //1- 创建xhr对象-使用这个对象 来发送网络请求
            let xhr = new XMLHttpRequest()
            //2-打开链接（服务器）
            // xhr.open('请求方式', '请求地址')
            //如果是get请求，请求参数 要放到请求地址后面 请求地址?参数1=参数值&参数2=参数值
            let url = 'http://jx.xuzhixiang.top/ap/api/hot.php'
            // let url = 'https://www.frontendjs.com/api/w_cate'
            xhr.open('get', url);
            // 3-发送请求
            xhr.send()
            // 4- 通过事件监听 请求的成功，一旦请求成功- 事件处理函数 就会自动被执行

            console.log('111');
            // 加载完毕事件-- 也叫回调函数（浏览器）--异步执行
            xhr.onload = function () {
                console.log('请求成功了');
                // 请求成功以后 需要在这个函数中获取请求成功 后端返回的json数据
                if (xhr.status == 200) {
                    //请求状态码 为 200 请求是成功
                    xhr.responseText//响应文本-后端返回的json数据
                    // console.log(xhr.responseText);

                    //把json字符串转为js对象
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);


                    // *** 遍历数组-拼接字符串--

                    // 找到返回数据中 我们需要的数据
                    let realtime = obj.data.realtime;
                    let str = ''
                    realtime.forEach((v, i) => {
                        str += `  <li>
                                    <span>${i + 1}</span>
                                    <span>${v.note}</span>
                                    <span>${(v.num / 10000).toFixed(1)}万</span>
                                </li>`
                    });
                    // 拼接的html 代码给ul
                    document.querySelector('ul').innerHTML = str
                }
            }

            console.log('222');



        }


    </script>

</body>

</html>